<template>
  <div class="all">
    <div class="s">
      <div class="title1">学生信息查询</div>
     
      <el-input
        v-model="input"
        placeholder="输入学号/年龄/班号……"
        style="--el-color-white: transparent; color: azure"
      >
        <template #append
          ><el-button icon="el-icon-search" @click="sendQuery"></el-button
        ></template>
      </el-input>
    </div>
    <div class="tip" v-if="data.length > 0">为您查询到了相关信息如下</div>
    <div class="tip" v-if="data.length == 0">空空如也</div>
    <div class="wai" v-if="data.length > 0">
      <el-table
      :data="tableData"
      style="
        --el-color-white: transparent;
        --el-text-color-regular: azure;
        --el-text-color-secondary: #909399;
        --el-background-color-base: transparent;
      "
    >
      <el-table-column prop="stuno" label="学号" />
      <el-table-column prop="stuname" label="姓名" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="classno" label="班号" />
    </el-table>

    </div>
    <div class="block" v-if="data.length > 0">
      <el-pagination
        style="--el-color-white: transparent; margin-top: 70px"
        layout="prev, pager, next"
        :total="(this.data.length * 10) / 5"
        @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      input: "",
      tableData: [],
      data: [],
      key:"",
      dic:{'stuno':'学号','age':'年龄','stuname':'姓名','classno':'班号'}
    };
  },
  methods: {
    sendQuery() {
      axios
        .get("http://localhost:8082/query", {
          params: { userquery: this.input },
        })
        .then((res) => {
          this.data = res.data;
          console.log(this.data);
          let keys = Object.keys(this.data[0])
          for (let key of keys){
            if(this.data.some(item=>item[key] == this.input)){
              console.log(key)
              this.key = this.dic[key]
            }
          }
          this.tableData = this.data.slice(0, 5);
          this.input = ""
        });
    },
    handlePage(cur) {
      this.tableData = this.data.slice((cur - 1) * 5, cur * 5);
    }
  },
};
</script>

<style>
.s {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 50px auto;
}
.s .el-input__inner {
  color: azure;
}
.title1 {
  margin-bottom: 30px;
  color: azure;
  font-size: 20px;
}
.tip{
  margin-bottom: 20px;
  color: azure;
}
.wai {
  width: 60%;
  margin: 30px auto;
  border: 1px solid azure;
}
</style>